import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Image} from '@tarojs/components';
import {AtIcon} from 'taro-ui';
import {newHttp} from "../../../utils/request";
import {NEW_GET_ORDER_DETAIL, RESOURCE_URL, TARO_ENV} from "../../../constants/api";
import {GetRequest} from "../../../utils/tools";
import Float from "../../../components/float/float";
import './type.scss'

export default class Type extends Component {
  state: {
    orderInfo: object
  } = {
    orderInfo: {}
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV == 'h5') {
      const root = document.querySelector('.taro-tabbar__panel')
      root.style.backgroundColor = '#f3f3f3'
      /*root.onscroll = debounce((page) => {
        this.setState({scrollTop: page[0].target.scrollTop})
      }, 10)*/
    }

    const { orderId } = Taro.getCurrentInstance().router.params
    const orderInfo = await newHttp.catchGet(NEW_GET_ORDER_DETAIL, {orderId})
    if (orderInfo) {
      this.setState({orderInfo: orderInfo})
    }
  }

  jumpForm(flag) {
    // flag：2漏发退款，4退货退款
    const {orderId} = Taro.getCurrentInstance().router.params
    Taro.navigateTo({ url: '/main/order/aftersales/refund?orderId=' + orderId + '&type=' + flag })
  }

  render() {
    const {
      orderInfo
    } = this.state
    if (!orderInfo) return
    return (
      <View className='after-sales-type'>
        <View className='goods'>
          <View className='goods-title'>退款商品</View>
          <View className='goods-info'>
            <Image
              src={orderInfo.default_img_url}
            />
            <View>
              <View className='goods-info-title'>{orderInfo.product_name}</View>
              <View className='goods-info-price'>
                <View>
                  <View className='price'><Text className='symbol'>￥</Text><View className='view-inline'><Float
                    value={orderInfo.total_fee}
                  /></View></View>
                </View>
                <View className='goods-info-num'>
                 x{orderInfo.buy_amount}
                </View>
              </View>
            </View>
          </View>
        </View>

        <View className='type'>
          <View className='type-title'>选择服务类型</View>
          <View className='type-choice' onClick={this.jumpForm.bind(this, 2)}>
            <View className='type-choice-icon'>
              <Image src={RESOURCE_URL + '/upload/images/20220411/1649682716018_935.png'} className='img' mode='widthFix' />
            </View>
            <View className='type-choice-info'>
              <View className='type-choice-info-title'>我要退款<Text>（无需退货）</Text></View>
             {TARO_ENV === 'h5' && <View className='type-choice-info-infoh5'>没收到货，或与卖家协商同意不用退货只退款</View>}
             {TARO_ENV === 'weapp' && <View className='type-choice-info-info'>没收到货，或与卖家协商同意不用退货只退款</View>}
            </View>
            <AtIcon value='chevron-right' size='20' color='#b6b7b8' className='type-icon' />
          </View>
          <View className='type-choice' onClick={this.jumpForm.bind(this, 4)}>
            <View className='type-choice-icon'>
              <Image src={RESOURCE_URL + '/upload/images/20220411/1649682740364_202.png'} className='img' mode='widthFix' />
            </View>
            <View className='type-choice-info'>
              <View className='type-choice-info-title'>我要退货退款</View>
              {TARO_ENV === 'h5' && <View className='type-choice-info-infoh5'>已收到货，需要退还收到的货物</View>}
              {TARO_ENV === 'weapp' && <View className='type-choice-info-info'>已收到货，需要退还收到的货物</View>}
            </View>
            <AtIcon value='chevron-right' size='20' color='#b6b7b8' className='type-icon' />
          </View>
        </View>
      </View>
    )
  }
}
